<template>
	<view class="TravelList">
		<u-toast ref="uToast"></u-toast>
		<u-navbar title="出行信息" :placeholder="true" :auto-back="true"></u-navbar>
		<u-modal @cancel="delShow=false" @confirm="delSure" :show="delShow" :showCancelButton="true" title="温馨提示" content="确认删除该游客信息吗？"></u-modal>
		<view class="travel_box">
			<view @click="$goUrl('/pages/mine/travel/add','to',{id: item.id})" v-for="(item,index) in list" :key="index" class="flex_box flex_row_between travel_item">
				<view class="flex_box">
					<view class="travel_content">
						<view class="travel_name">{{item.name}}</view>
						<view class="travel_text"><text>身份证</text>{{item.identity}}</view>
						<view class="travel_text"><text>手机号码</text>{{item.mobile}}</view>
					</view>
					<view @click.stop="del(index)">
						<u-image width="64rpx" height="64rpx" src="/static/delete.png"></u-image>
					</view>
				</view>
				<view @click.stop="check(index)" v-if="from=='order'" class="flex_box flex_row_center travel_check" :class="{'travel_check_active': visitorIds.indexOf(item.id)>-1}">
					<view class="flex_box flex_row_center travel_check_content">
						<view class="travel_check_dot"></view>
					</view>
				</view>
			</view>
			<view v-if="list.length===0" class="empty_box">
				<u-empty mode="data" icon="/static/empty/data.png" text="暂无出行人信息"></u-empty>
			</view>
			<view class="flex_box flex_row_between add_box">
				<u-button throttleTime="1000" @click="$goUrl('/pages/mine/travel/add','to')" :custom-style="{height: '96rpx'}" color="#0FBCF9" shape="circle" text="+添加出行人"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		visitorList,
		visitorDel
	} from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				list: [],
				from: '',
				delShow: false,
				delIndex: 0,
			}
		},
		onLoad(options) {
			that = this;
			if(options.from) that.from = options.from
		},
		onShow() {
			that.getList()
		},
		methods: {
			getList(){
				visitorList().then(res => {
					that.list = res.data;
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			del(e){
				that.delShow = true,that.delIndex = e;
			},
			delSure(){
				that.delShow = false
				visitorDel({id: that.list[that.delIndex].id}).then(res => {
					that.list.splice(that.delIndex,1),that.$refs.uToast.show({
						type: "success",
						message: "删除成功",
						complete(){
							
						}
					});
				}).catch(err => {
					uni.$u.toast(err.msg);
				});
			},
			check(e){
				if(that.visitorIds.indexOf(that.list[e].id) < 0){
					that.visitorIds.push(that.list[e].id)
					that.visitorList.push(that.list[e])
				}else{
					that.visitorIds.splice(e,1)
					that.visitorList.splice(e,1)
				}
				uni.$u.vuex('visitorIds', that.visitorIds);
				uni.$u.vuex('visitorList', that.visitorList);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.TravelList{
		min-height: 100vh;
		background-color: #F6F8FA;
		.travel_box{
			padding: 24rpx 36rpx 192rpx;
			.travel_item{
				height: 214rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				.travel_content{
					width: 540rpx;
					padding-left: 36rpx;
					.travel_name{
						font-size: 32rpx;
						color: #323232;
						line-height: 48rpx;
						font-weight: bold;
						margin-bottom: 12rpx;
					}
					.travel_text{
						font-size: 28rpx;
						color: #323232;
						line-height: 36rpx;
						font-weight: 500;
						margin-bottom: 10rpx;
						text{
							display: inline-block;
							width: 130rpx;
							color: #808E9B;
							font-size: 24rpx;
						}
					}
				}
				.travel_check{
					width: 100rpx;
					height: 100%;
					.travel_check_content{
						width: 28rpx;
						height: 28rpx;
						border-radius: 14rpx;
						border: 4rpx solid #1E272E;
					}
				}
				.travel_check_active{
					.travel_check_content{
						border: 4rpx solid #FFD32A;
						.travel_check_dot{
							width: 16rpx;
							height: 16rpx;
							border-radius: 8rpx;
							background-color: #FF3F34;
						}
					}
				}
			}
			.add_box{
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 9;
				background-color: #F6F8FA;
				padding: 0 72rpx;
				width: 100%;
				height: 192rpx;
			}
		}
	}
</style>
